<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="assets/css/css/about.css"/>
    <title>about-us</title>
    <style type="text/css">
        .banner{width: 100%;height: 400px;background: url(assets/img/r.jpg) no-repeat 100% 100%;background-size: 100% 100%;}
        .font{width: 90%;text-align: center;color: #fff;line-height: 60px;font-size: 20px;padding-top: 20px;}
        .font h1{word-spacing: 20px;letter-spacing: 10px;font-size: 50px;}
        .fontP{text-align: center;color: #fff;line-height: 60px;font-size: 20px;padding-top: 20px;}
        .forms{width: 90%;margin: 0 auto;}
        .form{background-color: #D6CCC5;text-align: center;display: flex;justify-content: space-around;align-items: center;height: 60px;width: 30%;padding: 0 20px;margin: 30px auto;}
        .form input{border-radius: 5px;display: block;height: 30px;width: 350px;border: none;padding-left: 10px;font-weight: bold;}
        .form button{width: 100px;height: 30px;border-radius: 5px;border: none;background: url(assets/img/button.png) no-repeat 10px 6px;background-size: 15px 15px;background-color: #F19323;font-weight: bold;}
        /* banner完 */
        .rightBox1{height: 160px;background: url(assets/img/banner4i.jpg) no-repeat;background-size: 100% 100%;}
        /* about完 */
        @media screen and (max-width:940px) {
        .form{flex-wrap: wrap;padding: 20px 20px;margin: 0px auto;}
        .fontP{font-size: 15px;padding-top: 0px;}
        /* about */
        .rightBox1{height: 260px;}
        }
        @media screen and (max-width:800px){
        .form{width: 40%;padding: 20px 20px;margin: 0px auto;}
        .font{line-height: 50px;padding-top: 10px;}
        .fontP{font-size: 15px;padding-top: 0px;}

        }
        @media screen and (max-width:650px){
        .form{width: 40%;padding: 20px 40px;margin: 5px auto;}
        .font{line-height: 40px;padding-top: 10px;}
        .font h1{word-spacing: 10px;letter-spacing: 10px;font-size: 40px;}
        .fontP{font-size: 15px;padding-top: 0px;}
        }
        /* 媒体查询 */

    </style>
</head>
<body>
    <div id="bigBox">
        <!--        头部-->
        <div th:replace="pub_head"></div>
        <div class="abouts">
            <div class="about">
                <div class="leftBox">
                    <div class="leftTop" th:each="user:${modules[12].module}" th:onclick="'detailFun('+${user.id}+')'">
                        <h4>[[${user.name}]]</h4>
                        <h6>[[${user.remark}]] <span>[[${user.title}]]</span>[[${user.description}]]</h6>
                        <img th:src="${user.imgUrl1}">
                        <p class="p1">[[${modules[12].banners[0].title}]]</p>
                        <p> [[${user.description}]]</p>
                        <p class="p2">[[${modules[12].banners[1].title}]]</p>
                        <p>[[${modules[12].banners[1].description}]]</p>
                        <div class="title">
                            <h4>[[${modules[13].banners[0].title}]]</h4>
                            <p>[[${modules[13].banners[0].description}]]</p>
                        </div>
                        <div class="title">
                            <h4>[[${modules[13].banners[1].title}]]</h4>
                            <p>[[${modules[13].banners[1].description}]]</p>
                        </div>
                        <div class="title">
                            <h4>[[${modules[13].banners[2].title}]]</h4>
                            <p>[[${modules[13].banners[2].description}]]</p>
                            <p>[[${modules[13].banners[2].content}]]</p>
                            <p class="p3">[[${modules[13].banners[2].content1}]]</p>
                            <p>[[${modules[13].banners[2].remark}]]</p>
                            <ul>
                                <li>[[${modules[0].banners[0].title}]]</li>
                                <li>[[${modules[0].banners[1].title}]]</li>
                                <li>[[${modules[0].banners[2].title}]]</li>
                            </ul>
                            <p>[[${modules[15].banners[0].description}]]</p>
                            <p>[[${modules[15].banners[1].description}]]</p>
                        </div>
                    </div><!--leftTop-->
                    <div class="leftBottom">
                        <div class="threeTitle">
                            <h4>[[${modules[16].module.title}]]</h4>
                        </div>
                        <div class="three" >
                            <div class="threes">
                                <img th:src="${modules[16].banners[0].imgUrl1}" >
                                <p>[[${modules[16].banners[0].title}]]</p>
                            </div>
                            <div class="threes">
                                <img th:src="${modules[16].banners[1].imgUrl1}">
                                <p>[[${modules[16].banners[1].title}]]</p>
                            </div>
                            <div class="threes">
                                <img th:src="${modules[16].banners[2].imgUrl1}">
                                <p>[[${modules[16].banners[2].title}]]</p>
                            </div>
                        </div>
                    </div>
                </div><!--leftBox-->
                <div class="rightBox">
                    <div class="rightBox1">
                        <h4>[[${modules[7].module.name}]]</h4>
                    </div>
                    <div class="box1">
                        <div class="rightTitle1">
                            <h4>[[${modules[7].module.title}]]</h4>
                        </div>
                        <p>[[${modules[7].module.description}]]</p>
                    </div>
                    <div class="box2">
                        <div class="rightTitle2">
                            <h4>[[${modules[8].module.title}]]</h4>
                        </div>
                        <div class="boxs2" th:each="user2:${modules[8].banners}" th:onclick="'detailFun('+${user2.id}+')'">
                            <div class="boxs2Img"><img th:src="${user2.content1}"></div>
                            <div class="boxs2P"><p>[[${user2.title}]]</p></div>
                    </div>
<!--                        <div class="boxs2">-->
<!--                            <div class="boxs2Img"><img src="assets/img/footer.jpg"></div>-->
<!--                            <div class="boxs2P"><p>Partner up: The fellowship of fitness</p></div>-->
<!--                        </div>-->
<!--                        <div class="boxs2">-->
<!--                            <div class="boxs2Img"><img src="assets/img/footer.jpg"></div>-->
<!--                            <div class="boxs2P"><p>Best and worst exercises to do when you have a cold</p></div>-->
<!--                        </div>-->
<!--                        <div class="boxs2">-->
<!--                            <div class="boxs2Img"><img src="assets/img/footer.jpg"></div>-->
<!--                            <div class="boxs2P"><p>Yoga for Rheumatoid Arthritis: Stretching Your Stiffness Away</p></div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="box1">
                        <div class="rightTitle3">
                            <h4>[[${modules[9].module.title}]]</h4>
                        </div>
                        <input type="text" v-model="Archives" placeholder="Seledt Month">
                    </div>
                    <div class="box3">
                        <div class="rightTitle4">
                            <h4>[[${modules[10].module.title}]]</h4>
                        </div>
<!--                        detail6-->
                        <div class="ul">
                            <ul>
                                <li th:each="user3:${modules[10].banners}" th:onclick="'detailFun('+${user3.id}+')'">
                                    <img th:src="${user3.imgUrl1}"></li>
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
                            </ul>
                        </div>
                    </div>
<!--                        detail2-->
                    <div class="box4">
                        <div class="rightTitle5">
                            <h4>[[${modules[11].module.title}]]</h4>
                        </div>
                        <div class="ul1" >
                            <ul>
                                <li th:each="i:${modules[11].banners}" th:onclick="'detailFun('+${i.id}+')'">
                                    [[${i.title}]]</li>
<!--                                <li>>May 2015</li>-->
<!--                                <li>>May 2015</li>-->
<!--                                <li>>May 2015</li>-->
                            </ul>
                        </div>
                    </div>
                </div><!--rightBox-->
            </div>
        </div>
            <!--        脚部-->
            <div th:replace="pub_footer"></div>
    </div><!--bigBox-->
        <script src="assets/js/js/jquery-1.8.2.min.js"></script>
        <script src="assets/js/js/common.js"></script>
        <script src="assets/js/js/html5zoo.js"></script>
        <script src="assets/js/js/jquery.countuo.min.js"></script>
        <script src="assets/js/js/jquery.js"></script>
        <script src="assets/js/js/wow.min.js"></script>
        <script src="assets/js/js/jquery.waypoints.min.js"></script>
        <script src="assets/utils/index.js"></script>

        <script type="text/javascript">
        // var one=new Vue({
        //     el:'#bigBox',
        //     data:{
        //         name:'',
        //         email:''
        //     }
        // })

        function detailFun(id){
            window.location.href = `cms_detail?id=${id}`;
        }

    </script>
    </div>
</body>
</html>
